<template>
  <customizeDialog
    :title="title"
    :visible="isDialog"
    width="500px"
    top="200px"
    @update:visible="isDialog = $event"
  >
    <el-form
      ref="basicFormRef"
      :model="form"
      :rules="basicRules"
      label-width="80px"
    >
      <el-form-item label="条款内容" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
        ></el-input>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="btnLoading" @click="handleCancel"
        >取 消</el-button
      >
      <el-button
        :loading="btnLoading"
        type="primary"
        @click="handleSumbit"
        >确 定</el-button
      >
    </template>
  </customizeDialog>
</template>

<script>
import customizeDialog from '@/components/checkHistory/customizeDialog'
import { addContentInfo } from '@/api/reportManagement'

export default {
  name: 'termDialog',
  components: { customizeDialog },
  props: {
    typeOptions: Array,
    projectLevelOptions: Array
  },
  data() {
    return {
      isDialog: false,
      btnLoading: false,
      title: '',
      form: {
        pkid: '',
        topType: '',
        type: '',
        content: ''
      },
      basicRules: {
        content: [
          {
            required: true,
            message: '请选择问题类型',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    show(title, detail) {
      this.reset()
      this.title = title
      this.form = Object.assign(this.form, detail)
      this.isDialog = true
    },
    reset() {
      this.form = {
        pkid: '',
        topType: '',
        type: '',
        content: ''
      }
    },
    handleCancel() {
      this.reset()
      this.isDialog = false
    },
    handleSumbit() {
      this.$refs.basicFormRef.validate((res) => {
        if (res) {
          this.btnLoading = true
          let formData = JSON.parse(
            JSON.stringify(this.form)
          )

          addContentInfo(formData).then((res) => {
            if (res.success) {
              this.$message.success('条款保存成功')
              this.$emit('success')
              this.isDialog = false
            } else {
              this.$message.error(res.message)
            }
            this.btnLoading = false
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/table.scss';
::v-deep {
  .el-dialog__wrapper {
    z-index: 2010 !important;
  }
  .el-dialog__header {
    background: #597182;
    font-size: 16px;
    .el-dialog__title {
      color: #ffffff;
    }
  }
}
.cancel {
  width: 80px;
  height: 34px;
  border: 1px solid #497fa3;
  font-size: 14px;
  font-weight: 400;
  color: #497fa3;
}
.sumbit {
  width: 80px;
  height: 34px;
  background: #497fa3;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
</style>
